  <script type="text/javascript"><!--//--><![CDATA[//><!--

var LOVTenant1 = function(ao_option){
    try{
        if(ao_option==undefined){ ao_option={}; }
        var lf_onSelect = (ao_option.onSelect==undefined || typeof(ao_option.onSelect)!='function') ? function(){} : ao_option.onSelect;
        
        // Create Popup
        var $popup  = openPopup({ title:'Daftar Tenant' , width:700, height:370 });
        var ls_id   = $popup.attr('id');
        
        // Append Datagrid Container
        var ls_gridName = 'grid_'+ls_id;
        $popup  .html(  $('<div>')  .attr('id', 'tb'+ls_id).attr('style','padding:5px;height:auto;')
                                    .html(  $('<div>').html($('<form>') .attr('id','fm_search_'+ls_id).data('rel',ls_id).submit(function(e){ $('#'+ls_gridName).datagrid('reload', $('#fm_search_'+$(this).data('rel')).serializeObject()); e.preventDefault(); })
                                                                        .html('<table class="tb_form" style="margin-bottom:0px"><tr><td width="100">Keyword</td><td><input type="text" name="keyword" class="textfield medium" /><a href="#" class="easyui-linkbutton" iconCls="icon-search" id="btn_search'+ls_id+'" rel="'+ls_id+'">Search</a></td></tr></table>')
                                                            )
                                            )
                        )
                .append($('<div>').attr('id', ls_gridName).attr('toolbar', '#tb'+$popup.attr('id')));
        
        $('#btn_search'+ls_id).click(function(){ $('#'+ls_gridName).datagrid('reload', $('#fm_search_'+$(this).attr('rel')).serializeObject()); return false; });
        $('#btn_search'+ls_id).linkbutton({  
            plain:true  
        }); 
        
        // Build Datagrid
        var ls_param = (ao_option.param==undefined ? '' : ao_option.param);
        $('#'+ls_gridName).datagrid({  
            url:gs_path+'/pro_kontrol_pemakaian_listrik/getdata/'+ls_param,
            queryParams: $('#fm_search_'+ls_id).serializeObject(),
            height:337,
            pagination:true,
            singleSelect:true,
            columns:[[
                { field : 'no_toko', title : 'No Toko', width : 170, sortable:true },
                { field : 'id_pemakaian', title : 'ID Pemakaian Listrik', width : 170, sortable:true },
                { field : 'nama_tenant', title : 'Nama Tenant', width : 120, sortable:true },
                { field : 'id_lokasi', title : 'ID Lokasi', width : 200, sortable:true },
                { field : 'lokasi_tempat', title : 'Lokasi Tempat', width : 200, sortable:true },
                { field : 'jenis_usaha', title : 'Jenis Usaha', width : 200, sortable:true },
                { field : 'kwh_awal_meter', title : 'KWH Awal Meter', width : 200, sortable:true },
                { field : 'kwh_akhir_meter', title : 'KWH Akhir Meter', width : 200, sortable:true },
                { field : 'tanggal', title : 'Tanggal', width : 250, sortable:true },
            ]],
            onSelect:function(rowIndex, rowData){ lf_onSelect(rowData); closePopup(); }
        });
        
    } catch (err) { alert('Func. LOVSampleReference :\n' + err); }
};


 	$(document).ready(function() {

		// Setup Form
		$('#form_master').setupForm([
			{ name: 'no_tagihan_listrik', type: 'text', size: 'short', maxlength: 10, readonly:true},
			{ name: 'no_toko', type: 'lov', size: 'long',
				onClearButton:function(){
					$(this).setval(''); 
                    $('#id_pemakaian').setval('');
					$('#nama_tenant').setval(''); 
					$('#lokasi_tempat').setval('');
                    $('#kwh_awal_meter').setval('');
                    $('#kwh_akhir_meter').setval('');
                    $('#tanggal').setval('');
                    $('#jenis_usaha').setval('');
				},
				onActionButton:function(){ 
					LOVTenant1({ onSelect:function(row){ 
						$('#no_toko').setval(row.no_toko);
                        $('#id_pemakaian').setval(row.id_pemakaian); 
						$('#nama_tenant').setval(row.nama_tenant);
                        $('#id_lokasi').setval(row.id_lokasi);
						$('#lokasi_tempat').setval(row.lokasi_tempat);
                        $('#jenis_usaha').setval(row.jenis_usaha); 
                        $('#kwh_awal_meter').setval(row.kwh_awal_meter);
                        $('#kwh_akhir_meter').setval(row.kwh_akhir_meter);
                        $('#tanggal').setval(row.tanggal);
                        var kwh_awal_meter1 = parseFloat($('#kwh_awal_meter').val());
                        var kwh_akhir_meter1 =  parseFloat($('#kwh_akhir_meter').val());
                        $('#kwh_terpakai').setval((kwh_akhir_meter1 - kwh_awal_meter1).toFixed(1));
                        var periode = row.tanggal;
                        var id_bulan = periode.split('-');
					}}); 
				}
			},
            { name: 'id_pemakaian', type: 'text', size: 'short', maxlength: 10, readonly:true},
			{ name: 'nama_tenant', type: 'text', size: 'short', maxlength: 10, readonly:true},
			{ name: 'lokasi_tempat', type: 'text', size: 'long', maxlength: 100, readonly:true},
            { name: 'jenis_usaha', type: 'text', size: 'long', maxlength: 100, readonly:true},
            { name: 'kwh_awal_meter', type: 'text', size: 'long', maxlength: 100, readonly:true},
			{ name: 'kwh_akhir_meter', type: 'text', size: 'short', maxlength: 20, readonly:true},
            { name: 'tanggal', type: 'text', size: 'medium', maxlength: 20, readonly:true},
			{ name: 'kwh_terpakai', type: 'text', size: 'medium', maxlength: 20, readonly:true},
			{ name: 'tarif_per_kwh', type: 'text', size: 'medium', maxlength: 20 },
			{ name: 'jumlah_pemakaian', type: 'text', size: 'medium', maxlength: 30},
			{ name: 'mcb', type: 'text', size: 'medium', maxlength: 20},
			{ name: 'biaya_beban', type: 'text', size: 'medium', maxlength: 20},
			{ name: 'jumlah_biaya_beban', type: 'text', size: 'medium', maxlength: 30, readonly:true},
			{ name: 'total_tagihan', type: 'text', size: 'medium', maxlength: 30, readonly:true},
            { name: 'status_listrik', type: 'text', size: 'short', maxlength: 20},
            { name: 'tgl_bayar', type: 'date', size: 'short', maxlength: 20},
            { name: 'no_bukti_pembayaran', type: 'text', size: 'medium', maxlength: 20},
            { name: 'status_bayar', type: 'text', size: 'medium', maxlength: 20}
		], <?php echo json_encode($data); ?>);
        
        <?php if (isset($no_tagihan_listrik)) {
        		?>
        		var no_tagihan_listrik = "<?php echo $no_tagihan_listrik; ?>";
        		<?php
        	}
        ?>

		$('#tarif_per_kwh').keyup(function() {
			var kwh_terpakai = parseFloat($('#kwh_terpakai').val());
			var tarif_per_kwh = parseInt($('#tarif_per_kwh').val());
			var sub_total2 = kwh_terpakai * tarif_per_kwh;
			$('#jumlah_pemakaian').setval(sub_total2);
		});

        $('#biaya_beban').keyup(function() {
            var jumlah_mcb =  parseInt($('#mcb').val());
            var total_Kva = jumlah_mcb * 220 / 1000;
            var biaya_beban = parseInt($('#biaya_beban').val());
            var sub_total = parseFloat(total_Kva) * biaya_beban;
            $('#jumlah_biaya_beban').setval(parseInt(sub_total));

            var jumlah_biaya_beban = parseInt($('#jumlah_biaya_beban').val());
            var jumlah_pemakaian = parseInt($('#jumlah_pemakaian').val());
            var sub_total2 = jumlah_biaya_beban + jumlah_pemakaian;
            $('#total_tagihan').setval(sub_total2);
        });     

        <?php if($mode=="create"){ ?>
        $('#no_tagihan_listrik, #jumlah_pemakaian').readonly();
        $('#no_tagihan_listrik').setval('<?php echo $no_tagihan_listrik; ?>');
        $('#id_tagihan_listrik').setval('<?php echo $id_tagihan_listrik_auto; ?>');
        <?php } ?>

        <?php if($mode=="edit"){ ?>
        $('#no_tagihan_listrik, #jumlah_pemakaian').readonly();

            var bulan = '<?php echo $bulan ; ?>'
            var tahun = '<?php echo $tahun ; ?>'

            $('#bulan').setval(bulan);
            $('#tahun').setval(tahun);
        <?php } ?>
		
		// Set Action Button
		var buttons = [{ label: 'Save', icon: 'save', onclick: function() { 
							$('#form_master').submitForm(	'/'+controller+'/ajax_post'  ); 
						}},
					   { label: 'Close', icon: 'cancel', onclick: function() { loadPage('/'+controller+'/Index'); } 



                      }];
		setAction(buttons);

		
		// Create Tab
		$('#tt').tabs({ border:false });  
		
		// Focus at First Object
		$('#form_master').focusFirst();

		
    });




//--><!]]></script>

<div id="form_master" style="display:none;"></div>
    <table class="tb_form" style="display:none;" cellpadding="0" cellspacing="0">
    <tr>
        <td >
            <input id="id_bulan" name="id_bulan" type="hidden"/>
            <input id="id_tagihan_listrik" name="id_tagihan_listrik" type="hidden"/>
            <input id="no_tenant" name="no_tenant" type="hidden"/>
            <input id="id_lokasi" name="id_lokasi" type="hidden"/>
        </td>
    </tr>
    <tr>
        <td class="label" style="width:150px">No Tagihan Listrik</td>
        <td><input id="no_tagihan_listrik" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">No Bukti Pembayaran</td>
        <td><input id="no_bukti_pembayaran" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Tanggal Pembayaran</td>
        <td><input id="tgl_bayar" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">No Toko</td>
        <td ><input id="no_toko"/></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">No Pemakaian Listrik</td>
        <td ><input id="id_pemakaian" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Nama Tenant</td>
        <td ><input id="nama_tenant" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Lokasi Tempat</td>
        <td ><input id="lokasi_tempat" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Jenis Usaha</td>
        <td ><input id="jenis_usaha" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Periode Tagihan</td>
        <td ><input id="tanggal" /></td>
    <tr>
        <td class="label" style="width:150px">Kwh Awal Meter</td>
        <td ><input id="kwh_awal_meter" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Kwh Akhir Meter</td>
        <td ><input id="kwh_akhir_meter" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Kwh Terpakai</td>
        <td ><input id="kwh_terpakai" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Tarif Per Kwh</td>
        <td ><input id="tarif_per_kwh" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Jumlah Pemakaian</td>
        <td ><input id="jumlah_pemakaian" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">MCB</td>
        <td ><input id="mcb" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Biaya Beban</td>
        <td ><input id="biaya_beban" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Jumlah Biaya Beban</td>
        <td ><input id="jumlah_biaya_beban" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Total Tagihan</td>
        <td ><input id="total_tagihan" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Status Listrik</td>
        <td ><select id="status_bayar" name="status_bayar">
             <option value="Sudah Bayar">Sudah Bayar</option>
             <option value="Belum Bayar">Belum Bayar</option>
        </td>
    </tr>
</table>
 